<template>
	<view class="frame">
		<view class="adress-now">
			<text>当前城市: {{address}}</text>
			<text @click="againAdress()">重新定位</text>
		</view>
		
		<view class="adress-hot">
			<view class="hot">{{hotcity.title}}</view>
			<view class="hot-city">
				<block v-for="(item,index) in hotcity.lists" :key="index">
					<view @click="backAddress(item)">{{item}}</view>
				</block>
			</view>
		</view>
		
		<view class="adress-list">
			<view class="hot city">{{citylist.title}}</view>
			<block v-for="(item,index) in citylist.lists" :key="index">
				<view @click="backAddress(item)" class="hot-list">{{item}}</view>
			</block>
		</view>
		
	</view>
</template>

<script>
import {addressdata} from '../../../common/list.js'		// 引入定位公共方法
var { log } = console;			// 解构
import CL from '../../../components/bazaar-city_list/citylist.json'	// 引入城市数据

export default {
	data() {
		return {
			address:'',
			hotcity:{},
			citylist:{},
		};
	},
	methods:{
		
		// 子方法:定位城市
		addRess() {
			addressdata()
			.then((res)=>{
				let sReg = new RegExp('市', 'g'); // 去除""符号的正则
				let strReg = new RegExp('"', 'g'); // 去除""符号的正则
				this.address = JSON.stringify(res.result.ad_info.city).replace(sReg, '').replace(strReg, '');
				
				// this.address = res.result.ad_info.city
				log("定位的城市地址:"+this.address)
				this.$store.commit('addressmuta',this.address)
				log("存入仓库的值:"+ this.address)
			})
			.catch((err)=>{
				log('用户拒绝地位')
				this.address = '南京市'
				this.$store.commit('addressmuta',this.address)
				log("存入仓库的值:"+ this.address)
			})
		},
		
		// 页面初始化:城市
		initCityList(){
			this.hotcity = CL.hotcity;
			this.citylist = CL.city
		},
		
		// 单击按钮:重新定位城市
		againAdress(){
			this.addRess();
			
		},
		
		// 按钮:定位完返回首页
		backAddress(item){
			this.goBack(item)
		},
		
		// 子方法:返回到首页
		goBack(address){
			this.$store.commit('addressmuta',address)
			uni.navigateBack({
			    delta: 1
			});
		}
	},
	
	// 接收首页面的路径数据
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		this.address = objdata.address;
	},
	
	// 页面挂载后进行异步操作
	created(){
		this.initCityList();
	}
}

</script>

<style scoped>
	.frame{
		margin: 0 30upx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.adress-now{
		font-size: 30upx;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
	}
	.adress-now text:last-child{
		color: #4656b4;
	}	
	.adress-hot{
		padding: 30upx 0;
		width: 100%;
	}
	.hot{
		font-size: 30upx;
	}
	.hot-city{
		margin-top: 30upx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.hot-city view{
		height: 70upx;
		background-color: #f9f9f9;
		font-size: 28upx;
		line-height: 70upx;
		border-radius: 10upx;
		padding: 0 40upx;
		margin: 15upx 15upx;
	}
	.adress-list{
		width: 100%;
	}
	.city{
		margin-bottom: 15upx;
	}
	.hot-list{
		width: 100%;
		height: 70upx;
		line-height: 70upx;
		padding: 15upx 0;
		font-size: 30upx;
		border-top: 1px solid #eeeeee;
	}
</style>
